<template>
  <view class="index" :style="[]">
    <!-- 返回 -->
    <view>
      <navTabrBack
        :navbackStyle="['display:none']"
        :titleStyle="['margin-left: 27rpx;']"
        :title="'我的'"
      ></navTabrBack>
    </view>
    <!-- useInfo -->
    <view class="useInfo">
      <image class="useImg" :src="img + useImg" mode="scaleToFill" />
      <view style="flex: 1 0">
        <view class="useName">{{ nickName }}</view>
        <view class="usePhon"
          >联系电话：{{ phone.length != 0 ? phone : "暂无电话号码！" }}</view
        >
        <view class="useExpLain">{{
          useInfo.email?.length != 0 ? useInfo.email : "这个家伙很懒，什么都没有留下…"
        }}</view>
      </view>
      <view class="edit" @click="toEditUseInfo"><text>点击编辑资料</text></view>
    </view>
    <!-- DataSum -->
    <view class="essay">
      <view class="dataSum">
        <view class="item">
          <view class="sum">{{ totleNum ? totleNum : 0 }}</view>
          <view class="Title">共享专利集</view>
        </view>
        <view class="border"></view>
        <view class="item">
          <view class="sum">{{ followNum }}</view>
          <view class="Title">粉丝数</view>
        </view>
      </view>
      <view></view>
    </view>
    <!-- UseTabr -->
    <view class="essay">
      <view class="Tabr">
        <view class="tabrItem" @click="toMyEntrust">
          <image src="../../static/img/page/a.png" mode="scaleToFill" />
          <view>我的委托</view>
        </view>
        <view class="tabrItem" @click="toMySale">
          <image src="../../static/img/page/b.png" mode="scaleToFill" />
          <view>我的出售</view>
        </view>
        <view class="tabrItem" @click="toMyDataList">
          <image src="../../static/img/page/c.png" mode="scaleToFill" />
          <view>我的专利集</view>
        </view>
        <view class="tabrItem" @click="toMyTake">
          <image src="../../static/img/page/d.png" mode="scaleToFill" />
          <view>我的订阅</view>
        </view>
        <view class="tabrItem" @click="toMyFollowPatent">
          <image src="../../static/img/page/e.png" mode="scaleToFill" />
          <view>我的关注</view>
        </view>
        <view class="tabrItem" @click="toMyNews">
          <image src="../../static/img/page/f.png" mode="scaleToFill" />
          <view class="roul">{{ infoNum }}</view>
          <view>我的消息</view>
        </view>
      </view>
    </view>
    <!-- 共享专利集 -->
    <view class="entTitle">共享专利集</view>
    <!-- useDataPatent -->
    <view class="essay">
      <view class="dataTitle">专利集（{{ totleNum ? totleNum : 0 }}个）</view>
      <!-- 展示列表 -->
      <view class="serchItem" v-for="(item, index) in dataList" :key="index">
        <image class="serchItemImg" :src="img + item.img" mode="scaleToFill" />
        <view @click="toAddMyDataList(item.ID)">
          <view class="patentTitle1">{{ item.name }}</view>
          <view class="patentClassify"
            >{{ item.orderNum }}条，订阅{{ item.audit_status }}次</view
          >
        </view>
        <!-- <view @click="open" class="iconfont icon-a-13Bshenglve"></view> -->
      </view>
    </view>
    <!-- 弹窗 -->
    <uni-popup ref="popup" type="bottom" @change="fnMask" safe-area>
      <view class="dataList">
        <view class="addItemTitle">添加到专利集</view>
        <view open-type="share" class="fenxiang" @click="addDataList">
          <text class="iconfont icon-zhuanfa"></text>
          <view>分享</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { toRefs, reactive, inject, ref } from "vue";
import {
  onPullDownRefresh,
  onReachBottom,
  onShareAppMessage,
  onShow,
} from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc");
let popup = ref();
let data = reactive({
  useImg: "../../static/img/page/01.png",
  nickName: "",
  phone: "",
  followNum: 0,
  infoNum: 0,
  groupNum: 0,
  totleNum: 0,
  useInfo: {},
  page: 1,
  res: {},
  isShowTbr: 0,
  dataList: [],
  total: 0,
  img: "",
});
onShow((res) => {
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      // 请求用户信息
      let token = res.data.token;
      uni.request({
        url: $url + `/user/getUserInfo`,
        method: "GET",
        timeout: 6000,
        header: {
          "x-token": token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          if (res.data.data?.userInfo) {
            res.data.data.userInfo.token = token;
            uni.setStorage({
              key: "useInfo",
              data: res.data.data.userInfo,
              success: function () {},
            });
          } else {
            wx.clearStorage({
              success(res) {},
              fail(err) {
                console.log("退出失败！", err);
              },
            });
            uni.redirectTo({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
  });
  data.page = 1;
  data.img = $imgSrc;
  initData();
});
const initData = () => {
  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      uni.redirectTo({
        url: "/pages/login/login",
      });
    },
    success: function (res) {
      data.page = 1;
      data.dataList = [];
      data.useInfo = res.data;
      data.nickName = res.data.nickName;
      data.useImg = res.data.headerImg;
      data.infoNum = res.data.infoNum;
      data.phone = res.data.phone;
      data.res = res.data;
      updataList(res.data);
    },
  });
};
const fnMask = () => {
  if (data.isShowTbr == 1) {
    setTimeout(() => {
      uni.showTabBar();
    }, 300);
  }
  data.isShowTbr = 1;
};
const toAddMyDataList = (id) => {
  uni.navigateTo({ url: `/pages/personal/myDataList/addMyDataList/index?id=${id}` });
};
let {
  useImg,
  nickName,
  phone,
  followNum,
  infoNum,
  totleNum,
  dataList,
  useInfo,
  img,
} = toRefs(data);
onPullDownRefresh(() => {
  data.page = 1;
  data.dataList = [];
  updataList(data.res);
  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      uni.redirectTo({
        url: "/pages/login/login",
      });
    },
    success: function (res) {
      data.useInfo = res.data;
      data.nickName = res.data.nickName;
    },
  });
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList(data.res);
});
const updataList = () => {
  uni.request({
    url:
      $url +
      `/zlMessage/getZlMessageList?page=1&pageSize=1&fromUserId=${data.useInfo.ID}`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.useInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.infoNum = res.data.data.total;
    },
  });
  uni.request({
    url:
      $url +
      `/zlGroup/getZlGroupList?page=${data.page}&pageSize=10&status=1&userId=${data.useInfo.ID}`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.useInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.totleNum = res.data.data.total;
      res.data.data.list.map((item) => {
        data.dataList.push(item);
      });
    },
  });
};

const toEditUseInfo = () => {
  uni.navigateTo({
    url: "/pages/editUserInfo/editUserInfo",
  });
};
const toMyEntrust = () => {
  uni.navigateTo({
    url: "/pages/personal/myEntrust/index",
  });
};
const toMyDataList = () => {
  uni.navigateTo({
    url: "/pages/personal/myDataList/index",
  });
};
const toMySale = () => {
  uni.navigateTo({
    url: "/pages/mySale/index",
  });
};
const toMyTake = () => {
  uni.navigateTo({
    url: "/pages/personal/myTakeList/index",
  });
};
const toMyFollowPatent = () => {
  uni.navigateTo({
    url: "/pages/personal/myFollowPatent/index",
  });
};
const toMyNews = () => {
  uni.navigateTo({
    url: "/pages/personal/myNews/index",
  });
};
const open = () => {
  data.isShowTbr = 0;
  popup.value.open("button-text");
  uni.hideTabBar();
};
const addDataList = () => {
  uni.hideShareMenu({
    // title: "fenxiang",
    // content: "564645646fenxiang",
    // imageUrl: "https://qmplusimg.henrongyi.top/gva_header.jpg",
    // path: "pages/personal/personal",
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      console.log(res);
    },
  });
  popup.value.close();
  setTimeout(() => {
    uni.showTabBar();
  }, 300);
};
</script>

<style scoped>
.iconfont {
  margin-left: 25rpx;
  color: #999;
}
.index {
  min-height: 100vh;
  background: linear-gradient(
    157deg,
    #ccdbfe 0%,
    #d9eeeb 17%,
    #f3f5f8 23%,
    #f4f6f9 56%,
    #f4f6f9 75%,
    #f4f6f9 100%
  );
  padding-bottom: 55rpx;
}
.essay {
  /* display: flex;
  align-items: center; */
  margin: 31rpx 27rpx 0 27rpx;
  border-radius: 11rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(230, 230, 230, 0.5);
  border-radius: 11rpx;
}
.entTitle {
  padding-top: 30rpx;
  padding-left: 27rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #000000;
}
.edit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 15rpx;
  margin-left: 20rpx;
  width: 164rpx;
  height: 54rpx;
  background: #b1ccff;
  border-radius: 181rpx 0rpx 0rpx 181rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
}
.useInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 27rpx;
}
.useImg {
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  border-radius: 50%;
  margin: 0 28rpx;
}
.useName {
  font-size: 29rpx;
  font-weight: 700;
  color: #333333;
}
.usePhon {
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
.useExpLain {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.dataSum {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 80rpx;
  width: 100%;
  padding: 25rpx 0 23rpx 0;
}
.border {
  width: 0;
  height: 80rpx;
  border-right: 1rpx solid #d7d7d7;
}
.item {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.sum {
  font-size: 33rpx;
  font-weight: 600;
  color: #333333;
}
.Title {
  font-size: 25rpx;
  font-weight: 400;
  color: #666666;
}
.Tabr {
  padding: 28rpx 36rpx 0 57rpx;
  height: 230rpx;
  display: flex;
  flex-wrap: wrap;
}
.tabrItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 33%;
}
.tabrItem image {
  width: 43.48rpx;
  height: 43.48rpx;
}
.tabrItem view {
  margin-top: 5rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.roul {
  position: absolute;
  top: -18rpx;
  right: 63rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34rpx;
  height: 29rpx;
  background: #ff3b30;
  border-radius: 14rpx 14rpx 14rpx 0rpx;
  font-size: 20rpx !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}
.dataTitle {
  margin: 0 0 0 28rpx;
  padding-top: 36rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  padding-bottom: 28rpx;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 27rpx 34rpx 32rpx 18rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 11rpx;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 475rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.dataList {
  width: 100%;
  height: 199rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 11rpx 11rpx;
  padding-bottom: calc(10px + env(safe-area-inset-bottom) / 2);
}
.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.fenxiang::after {
  border: none;
}
.fenxiang {
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background-color: #ffffff;
  border-radius: 0;
  box-sizing: border-box;
  color: #333;
  cursor: pointer;
  font-size: 18px;
  line-height: 2.55555556;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  text-decoration: none;
  border: none !important;
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
</style>
